<template>
  <homeHead />
  <div class="aiplan">
    <div class="head">
      <span>Hi, 欢迎使用 AI 旅行规划</span>
      <span>让 AI 为您定制完美行程</span>
    </div>
    <div class="travel-detail">
      <div class="title">
        <van-search
          class="travel-title"
          left-icon="flag-o"
          maxlength="8"
          v-model="travelTitle"
          placeholder="请输入行程标题" 
        />
      </div>
      <div class="destination">
        <div class="begin-place">
          <van-search
            class="travel-place"
            left-icon="location-o"
            v-model="firstPlace"
            placeholder="第一站想去哪里？" 
          />
          <van-button @click="addPlace" size="small" icon="plus" type="primary" />
        </div>
        <div class="next-place" v-for="(item, index) in travelPlaceList" :key="index">
          <van-search
            class="travel-place"
            left-icon="location-o"
            v-model="travelPlaceList[index]"
            placeholder="下一站目的地" 
          />
          <van-button @click="decreasePlace(index)" class="decrease" size="small" icon="minus" type="primary" />
        </div>
      </div>
      <div class="people">
        <van-search
          class="travel-people"
          left-icon="friends-o"
          v-model="peopleCount"
          placeholder="请输入旅行人数" 
        />
      </div>
      <div class="date">
        <van-button @click="show = true" class="travel-date" block icon="notes-o" type="primary">点击选择出行日期</van-button>
        <van-popup :show="show" position="bottom">
          <van-picker-group
            title="预约日期"
            :tabs="['开始日期', '结束日期']"
            next-step-text="下一步"
            @confirm="onConfirm"
            @cancel="show = false"
          >
            <van-date-picker
              v-model="startDate"
              :min-date="minDate"
              :max-date="maxDate"
            />
            <van-date-picker v-model="endDate" :min-date="minDate" :max-date="minDate" />
          </van-picker-group>
        </van-popup>
      </div>
    </div>
    <div class="travel-style">
      <span class="style-head">旅行风格</span>
      <div class="style-class">
        <span class="style-class-head">点击选择你想要的风格</span>
        <div class="style-class-content">
          <div @click="selectStyle(index, item.content)" class="item" :class="{'active': index === styleShow}" v-for="(item, index) in styleList" :key="index">
            <i class="iconfont" :class="`${item.img}`"></i>
            <span>{{ item.content }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="travel-budget">
      <span class="budget-head">旅行预算</span>
      <div class="budget-content">
        <span class="budget-content-title">预算范围</span>
        <div class="budget-content-detail">
          <van-field
            class="budget"
            v-model="travelCost"
            left-icon="cash-o"
            placeholder="请输入您的预算"
          />
        </div>
      </div>
    </div>
    <van-button @click="toAiResult" class="begin-edit" icon="edit" type="primary">开始规划</van-button>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue';
import homeHead from '../components/homeHead.vue';
import { useRouter } from 'vue-router';
import { showToast } from 'vant';
import axios from '../api/axios.js'
import { useAiResultStore } from '../store/airesult.js';
import { formateDays } from '../utils/formatedate.js';
// 调用ai结果仓库
const aiResultStore = useAiResultStore()
// 风格选择
const styleShow = ref(-1)
// 旅行风格
const travelStyle = ref('')
// 旅行风格列表
const styleList = reactive([
  {
    img: 'icon-xihuan',
    content: '情侣约会'
  },
  {
    img: 'icon-shangwu',
    content: '商务考察'
  },
  {
    img: 'icon-pengyou',
    content: '朋友游玩'
  },
  {
    img: 'icon-jiating',
    content: '家庭出游'
  }
])
// 日期弹出
const show = ref(false)
// 开始和结束日期
const startDate = ref(['2025', '02', '21']);
const endDate = ref(['2025', '08', '01']);
// 行程标题
const travelTitle = ref('')
// 第一个旅行地点
const firstPlace = ref('')
// 旅行地点列表
const travelPlaceList = reactive([firstPlace.value])
// 旅行人数
const peopleCount = ref()
// 旅行预算
const travelCost = ref()


// 添加旅行地点
const addPlace = () => {
  travelPlaceList.push('')
}
//减少旅行地点
const decreasePlace = (index) => {
  travelPlaceList.splice(index, 1)
}
// 确认日期选择
const onConfirm = () => {
  show.value = false
  showToast(`${startDate.value.join('-')} 至 ${endDate.value.join('-')}`);
}
// 选择风格
const selectStyle = (index, content) => {
  styleShow.value = index
  travelStyle.value = content
}

// 前往ai规划结果页面
const router = useRouter()
const toAiResult = async () => {
  const msg = {
    role: 'user',
    content: {
      travelPlaceList: travelPlaceList.filter(item => item !== ''),
      peopleCount: peopleCount.value,
      startDate: startDate.value.join('-'),
      endDate: endDate.value.join('-'),
      travelStyle: travelStyle.value,
      travelCost: travelCost.value,
      travelDays: formateDays(endDate.value.join('-'), startDate.value.join('-'))
    }
  }
  for (let i in msg.content) {
    if (msg.content[i].toString() === '') {
      showToast(`请输入${i}`)
      return
    }
  }
  const res = await axios.post('http://localhost:3000/aiplan/result', msg)
  // console.log(res.content);
  // 用正则去除ai生成结果中的思考过程，将值存入菠萝仓库中
  aiResultStore.changeAiPlanResult(res.content.replace(/<think>[\s\S]*?<\/think>\s*/g, ''))
  // 打印仓库中的结果  
  console.log(aiResultStore.getAiPlanResult());
  router.push('/airesult')
}
</script>

<style lang="less" scoped>
.aiplan{
  height: calc(100vh - 4rem);
  overflow-y: scroll;
  padding: 0.43rem;
  background-color: #fff;
  .head{
    span{
      display: inline-block;
    }
    span:first-child{
      font-weight: 500;
      font-size: 0.64rem;
      color: #000000;
      line-height: 32px;
      margin-bottom: 0.21rem;
    }
    span:nth-child(2){
      font-weight: 400;
      font-size: 0.43rem;
      color: #4B5563;
      line-height: 21px;
    }
  }
  .travel-detail{
    margin-top: 0.64rem;
    border-radius: 0.43rem;
    border: 1px solid #F3F4F6;
    padding: 0.43rem;
    box-sizing: border-box;
    .title{
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .travel-title{
        flex: 1;
        padding-left: 0;
        padding-right: 0;
        padding-top: 0;
      }
    }
    .destination{
      .begin-place{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .travel-place{
          flex: 1;
          padding-left: 0;
        }
      }
      .next-place{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .travel-place{
          flex: 1;
          padding-left: 0;
        }
        .decrease{
          background-color: rgb(247, 248, 250);
          color: #9CA3AF;
          border: none;
        }
      }
    }
    .people{
      .travel-people{
        padding-left: 0;
        padding-right: 0;
      }
    }
    .date{
      margin-top: 10px;
      margin-bottom: 0;
    }
  }
  .travel-style{
    margin-top: 0.64rem;
    .style-head{
      font-weight: 600;
      font-size: 0.48rem;
      color: #000000;
      line-height: 28px;
    }
    .style-class{
      margin-top: 0.35rem;
      padding: 0.43rem;
      border-radius: 16px;
      overflow: hidden;
      background: linear-gradient( 90deg, #3176FF 0%, #2DD4BF 100%);
      &-head{
        color: #fff;
        font-size: 0.37rem;
      }
      &-content{
        margin-top: 0.43rem;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        column-gap: 0.32rem;
        row-gap: 0.32rem;
        .item{
          color: #fff;
          padding: 12px 35px;
          background: rgba(255,255,255,0.2);
          border-radius: 8px;
          font-size: 0.37rem;
          display: flex;
          justify-content: center;  
          align-items: center;
          .iconfont{
            margin-right: 3px;
          }
        }
        .active{
          background: rgba(255,255,255,0.5);
        }
      }
    }
    
  }
  .travel-budget{
    margin-top: 0.64rem;
    .budget-head{
      font-weight: 600;
      font-size: 0.48rem;
      color: #000000;
      line-height: 28px;
    }
    .budget-content{
      border-radius: 16px;
      margin-top: 0.35rem;
      border: 1px solid #F3F4F6;
      padding: 0.43rem;
      &-title{
        font-weight: 400;
        font-size: 0.37rem;
        color: #4B5563;
        line-height: 20px;
      }
      &-detail{
        margin-top: 0.21rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .budget{
          padding: 8px;
          background-color: #F7F8FA;
        }
      }
    }
  }
  .begin-edit{
    width: 100%;
    margin-top: 0.6rem;
  }
}
</style>